<template>
    <div class="box">
        <el-input id="inputId" class="input" v-model="user.account" placeholder="Please input account" type="number" @focus="idWarning"/>
        <span id="accountNotExist" style="color: #F56C6C;display:none" >用户不存在</span>
        <el-input
                id="inputPassword"
                class="input"
                v-model="user.password"
                type="password"
                placeholder="Please input password"
                show-password
                @focus="passwordWarning"
        />
        <span id="passwordNotMatch" style="color: #F56C6C;display:none" >密码错误</span>
        <br>
        <el-button class="button" id="login" type="primary" @click="login">登陆</el-button>
        <el-button class="button" id="enroll" type="primary" @click="enroll">注册</el-button>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "LoginBox",
        data() {
            return {
                user:{
                    account: "",
                    password: ""
                },
                avatar:""
            }
        },
        mounted() {
            document.getElementById("inputId").focus();
        },
        methods:{
            login() {
                //连接后端，验证账号密码
                const loginData=JSON.stringify(this.user);
                // const pw="";
                axios.post("/api/user/loginVerification",loginData, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }
                ).then(
                    res => {
                        // console.log(res.data)
                        console.log("提交成功", res.data);
                        if(res.data==400){
                            let s=document.getElementById("accountNotExist");
                            s.style.display="inline-block";
                            console.log(s.innerText);
                            this.user.account=0;
                            return;
                        }
                        if(res.data==200){
                            console.log("登陆成功");
                            this.$store.commit("setToken",true);
                            this.$store.commit("setUserAccount",this.user.account);
                            let phonenumber=this.user.account;
                            axios.get("/api/user/query/"+phonenumber
                            ).then(res => {
                                console.log(res.data.avatar)
                                this.avatar=res.data.avatar;
                                this.$store.commit("setAvatarURL",this.avatar);
                            }).catch(error => {
                                console.log(error,res.data);
                            })

                            this.$router.push("/home");
                            return;
                        }else if(res.data==201){
                            let s=document.getElementById("passwordNotMatch");
                            s.style.display="inline-block";
                            console.log("密码错误");
                            this.user.password="";
                            return;
                        }
                    }
                ).catch(error => {
                    console.error("发送失败", error)
                })
            },
            idWarning(){
                let display=document.getElementById("accountNotExist").style.display;
                if(display=="none"){
                    return;
                }
                document.getElementById("accountNotExist").style.display="none";
            },
            passwordWarning(){
                let display=document.getElementById("passwordNotMatch").style.display;
                if(display=="none"){
                    return;
                }
                document.getElementById("passwordNotMatch").style.display="none";
            },
            enroll(){
                this.$router.push("/enroll");
            }
        }

    }
</script>

<style scoped>
    .box {
        border: 1px solid black;
        border-radius: 15px;
        width: 600px;
        height: 320px;
        position: absolute;
        top: 263px;
        left: 665px;
    }

    .input {
        width: 60%;
        margin-top: 50px;
    }

    .button {
        margin-right: 20px;
        margin-top: 60px;
    }

    #accountNotExist{
        position: absolute;
        top:57px;
        right:20px;
    }
    #passwordNotMatch{
        position: absolute;
        top:148px;
        right:35px;
    }


</style>